<template>
  <div class="account">
    <p style="font-size:24px;font-weight:600">
      手机号登录<br>
      <span style="color: #d0caca;font-size: 14px;">若手机号未注册，将自动注册为七鲜账号</span>
    </p>
    <div class="accountLogin">
      <p>
        <van-field v-model="tel" center clearable placeholder="请输入手机号">
          <template #button>
            <van-button type="primary" @click="send">发送验证码</van-button>
          </template>
        </van-field>
      </p>
      <p>
        <van-password-input :value="value" :mask="false" :focused="showKeyboard" @focus="showKeyboard = true"
          gutter="20" length	='4'  />
      </p>
    </div>
    <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
  </div>
</template>

<script>
import Login from '@/api/login.js'
import axios from 'axios'
import { Toast } from 'vant'
export default {
  data() {
    return {
      tel: "",//"手机号"
      consumerId: "",
      value: "",
      errorInfo: '',
      showKeyboard: false,
    }
  },
  methods: {

    async send() {
      var pattern = /0?(13|14|15|18|17|19)[0-9]{9}/
      // pattern.test(this.tel)
      if ( pattern.test(this.tel)) {
        console.log(1111)
        axios({
          method: "POST",
          // url:'http://192.168.1.60:8100/user/login',
          url: '/api/user/login',
          data: {
            'consumerTel': this.tel
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        }).then(res => console.log(res))
      } else {
        Toast({
          message: "请输入正确手机号",
          duration: 1000
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.account {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 0 0 20px;
}

.accountLogin {
  margin-top: 1vh;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 40px;

  p:nth-of-type(2) {
    width: 300px;
    height: 40px;
  }

  .van-field {
    box-sizing: border-box;
    padding: 10px;
    height: 40px;
    width: 300px;
    outline: #1176b5;
    border: 1px solid #333;
    background: #fbfbfb;
    border-radius: 10px;
    padding-right: 0;

    .van-button {
      background: rgb(83, 198, 223);
      border-radius: 10px;
      border-top-left-radius: 40px;
      border-bottom-left-radius: 40px;
    }
  }
}
</style>